// @ts-nocheck
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getArticles } from "../store/actions/articleList";
const ArticleList = () => {
  // 初始化第一次渲染的时候，切换频道的时候需要文章列表数据
  const { activeId } = useSelector((state) => state.channel);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getArticles(activeId));
  }, [dispatch, activeId]);

  // 获取文章列表
  const articleList = useSelector((state) => state.article);

  return (
    <div className="list">
      {articleList.map((item) => (
        <div className="article_item" key={item.art_id}>
          <h3>{item.title}</h3>
          <div className="img_box">
            <img
              src={
                item.cover.type === 0
                  ? "http://geek.itheima.net/resources/images/49.jpg"
                  : item.cover.images[0]
              }
              className="w100"
              alt=""
            />
          </div>
          <div className="info_box">
            <span>{item.aut_name}</span>
            <span>100评论</span>
            <span>{item.pubdate}</span>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ArticleList;
